<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>线条进度</title>-->
<!--    <style>-->
<!--        path{-->
<!--            stroke-dasharray: 20000;-->
<!--            stroke-dashoffset: 0;-->
<!--            /*animation: draw 5s ease 3;*/-->
<!--        }-->
<!--        /*@keyframes draw{*/-->
<!--        /*    0%{*/-->
<!--        /*        stroke-dashoffset: 1000;*/-->
<!--        /*    }*/-->
<!--        /*    100%{*/-->
<!--        /*        stroke-dashoffset: 0;*/-->
<!--        /*    }*/-->
<!--        /*}*/-->
<!--    </style>-->

<!--</head>-->
<!--<body>-->
<!--<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3" class="test">-->
<!--    <g fill="#61DAFB">-->
<!--        <path d="M153 334-->
<!--C153 334 151 334 151 334-->
<!--C151 339 153 344 156 344-->
<!--C164 344 171 339 171 334-->
<!--C171 322 164 314 156 314-->
<!--C142 314 131 322 131 334-->
<!--C131 350 142 364 156 364-->
<!--C175 364 191 350 191 334-->
<!--C191 311 175 294 156 294-->
<!--C131 294 111 311 111 334-->
<!--C111 361 131 384 156 384-->
<!--C186 384 211 361 211 334-->
<!--C211 300 186 274 156 274"-->
<!--              style="fill:white;stroke:red;stroke-width:2"/>-->
<!--        <circle cx="420.9" cy="296.5" r="45.7"/>-->
<!--        <path d="M520.5 78.1z"/>-->
<!--    </g>-->
<!--</svg>-->
<!--</body>-->
<!--</html>-->


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>svg demo</title>
    <style type="text/css">
        #line{
            transition: all 2s;
            stroke-dasharray:300 320;
            stroke-dashoffset:300;
        }

        svg:hover #line{
            stroke-dashoffset: 0;
        }


        #circle {
            transition: all 2s;
            stroke-dasharray: 314, 314;
            stroke-dashoffset: 314;
        }

        svg:hover #circle {
            stroke-dashoffset: 0;
        }
    </style>
</head>
<body>

<h3>线</h3>

<svg width="100%" height="40" >
    <line id="line" x1="30" y1="30" x2="300" y2="30" stroke-width="20" stroke="green" />

</svg>
<!--<svg width="100%" height="40">-->
<!--    <line id="line" x1="30" y1="30" x2="300" y2="30" stroke-width="20" stroke="green" stroke-dasharray="10"/>-->

<!--</svg>-->

<!--<svg width="100%" height="40">-->
<!--    <line id="line" x1="30" y1="30" x2="300" y2="30" stroke-width="20" stroke="green"-->
<!--          stroke-dasharray="10"-->
<!--          stroke-dashoffset="10"/>-->
<!--</svg>-->


<h3>圆区域</h3>

<svg width="200" height="200" viewBox="0 0 200 200">
    <circle id="circle" cx="100" cy="80" r="50" fill="gray" stroke-width="5" stroke="green"/>
</svg>

</body>
</html>